<template>
  <div>==={{$attrs.aa}}
    <el-upload
      action="#"
      :on-preview="onPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      list-type="picture-card"
      :http-request="upload"
      :class="{ disabled: fileComputed }"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 进度条 -->
    <el-progress
      :text-inside="true"
      :stroke-width="26"
      v-if="precentShow"
      color="pink"
      :percentage="percentage"
    ></el-progress>

    <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->

    <!-- 弹出层 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <img style="width:200px;" :src="imgSrc" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
var cos = new COS({
  SecretId: "AKIDDG2XZMeaWGgpguBe62SdYCguYv01nIVt", // 身份识别 ID
  SecretKey: "GRJuGNDlVFk000lFSoztUp1ye3d3C4i7" // 身份密钥
});
export default {
  name: "",
  created(){
    //console.log(this,778899);
  },
  data() {
    return {
      dialogVisible: false,
      imgSrc: "",
      currentFileUid: null,
      fileList: [
        {
          url: "https://hr-1302684573.cos.ap-nanjing.myqcloud.com/head.jpg"
        }
      ],
      percentage: 0,
      precentShow: false
    };
  },
  computed: {
    fileComputed() {
      return this.fileList.length == 1;
    }
  },
  methods: {
    // onPreview(file) {
    //   console.log(file, 555666);
    // }
    onPreview({ url, uid }) {
     // console.log(url, 555666);
      /*
      + 显示对话框
      + 显示图片
       */
      this.dialogVisible = true;
      this.imgSrc = url;
    },

    handleRemove(file) {
      // file是点击删除的文件
      //   将原来的文件给排除掉了 剩下的就是最新的数组了
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
    },
    handleChange(file, fileList) {
      //console.log(file, fileList, this.fileList, 66);
      this.fileList = fileList.map(item => item);
    },
    beforeUpload(file) {
      // 要开始做文件上传的检查了
      // 文件类型 文件大小
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      if (!types.includes(file.type)) {
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
        return false;
      }
      //  检查大小
      const maxSize = 5 * 1024 * 1024;
      if (maxSize < file.size) {
        this.$message.error("图片大小最大不能超过5M");
        return false;
      }

      this.currentFileUid = file.uid;

      this.precentShow = true;
      return true;
    },
    // 自定义上传动作 有个参数 有个file对象，是我们需要上传到腾讯云服务器的内容
    upload(params) {
      //console.log(params, 8888);
      if (params.file) {
        cos.putObject(
          {
            Bucket: "hr-1302684573" /* 必须 */,
            Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
            Key: params.file.name /* 必须   图片名称 */,
            StorageClass: "STANDARD" /* 标准模式 不用更改 */,
            Body: params.file, // 上传文件对象
            onProgress: progressData => {
              //console.log(progressData.percent * 100, 333444);
              this.percentage = progressData.percent * 100;
            }
          },
          (err, data) => {
            //console.log(data, 9999);
            if (!err && data.statusCode == 200) {
              //  表示上传成功
              this.fileList = this.fileList.map(item => {
                //  判断是否是当前的上传图片
                if (item.uid == this.currentFileUid) {
                  return {
                    url: "http://" + data.Location,
                    upload: true
                  };
                }
                return item;
              });

              setTimeout(() => {
                this.precentShow = false;
                this.percentage = 0; // 进度归0
              }, 1000);
            }
          }
        );
      }
    }

    // format(percentage){
    //   console.log(percentage,112323);

    // }
  }
};
</script>
<style>
.disabled .el-upload--picture-card {
  display: none !important;
}
</style>
